<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app" style="width:50%;margin:30px auto;">
        <h1 align="center">注册界面</h1>

        <el-form ref="form" :model="usermodel" label-width="80px">
            <el-form-item label="姓名">
            <el-input placeholder="请输入姓名" v-model="usermodel.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input placeholder="请输入密码" v-model="usermodel.pwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="usermodel.gender">
                    <el-radio label="男"></el-radio>
                    <el-radio label="女"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="生日">
                <el-date-picker
                        v-model="usermodel.birthday"
                        type="date"
                        format="yyyy年MM月dd日"
                        placeholder="选择日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="头像">
                <el-upload
                        class="upload-demo"
                        action="#"
                        :http-request="handleSuccess"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        list-type="picture">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="register">注册</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="../js/date.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                usermodel:{
                    name:'',
                    pwd:'',
                    gender:'',
                    birthday:'',
                    file:''
                },
                fileList: [],
            },
            methods:{
                handleSuccess(param){
                    this.usermodel.file = param.file
                },
                handleRemove(file, fileList) {
                    console.log(file, fileList);
                },
                handlePreview(file) {
                    console.log(file);
                },
                register(){
                    //alert('注册')
                    //以二进制数据格式，传递表单数据
                    let data = new FormData();
                    //迭代usermodel对象中的数据，封装至FormData中
                    for(let key in this.usermodel){
                        data.append(key , this.usermodel[key])
                    }
                    this.usermodel.birthday = new Date(this.usermodel.birthday).Format('yyyy-MM-dd')
                    data.set('birthday' , this.usermodel.birthday)
                    axios.post('register' , data)
                        .then(response=>{
                            //console.log(response)
                            let code = response.data.code
                            let msg = response.data.msg
                            if(code==200){
                                this.$message({showClose: true,message: msg,type: 'success'});
                                //跳转至用户列表页面
                                window.location.href="./userViewAll.html#/viewAll"
                            }else{
                                this.$message({showClose: true,message: msg,type: 'error'});
                            }
                        })
                        .catch(error=>{
                            console.log(error)
                        })
                }
            }
        })
    </script>
</body>

</html>